<template>
        <el-table
                :data="calendar.weeks"
                :cell-style="{
                'padding': '0px'
            }"

                :loading="loading"
                cell-class-name="admin-calendar-fix"
                border>
            <el-table-column
                    v-for="(item,index) in daysName"
                    :label="item"
            >
                <template slot-scope="days">
                    <day
                            :days="days"
                            :index="index"
                            :type="$route.params['type']"
                        @delete="onAdvertDelete"
                    ></day>
                </template>
            </el-table-column>
        </el-table>
</template>
<style lang="scss">
    .admin-calendar-fix {
        height: 100%;
        display: table-cell;
        .cell {

            top: 0px;
            left: 0px;
            padding: 0px !important;
            height: 100%;
            width: 100%;
        }
    }
</style>
<script lang="ts">

    import {Vue, Component,Prop, Watch} from 'vue-property-decorator'
    import {Api} from '@/api/meta'
    import Day from './AdminCalendarDay'

    @Component({
        name: 'AdminAdvertCalendar',
        components: {
            Day,
        },
    })
    export default class AdminAdvertCalendar extends Vue {


        @Prop({
            type:String,
            required:true
        })
        date;

        loading:boolean = false;

        daysName : Array<string> = [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天"];

        calendar: Api.Meta.GetAdvertCalendarResponse = {
            weeks: []
        };

        loadView() {

            this.loading = true;
            this.calendar = {
                weeks:[]
            };

            let type:any = this.$route.params['type'];

            Api.Meta.GetAdvertCalendar({
                type:type,
                date:this.date,
            }).then((data) => {
                this.calendar = data;
                this.loading = false;
            }).catch(()=>{
                this.loading = false;
                this.calendar = {
                    weeks:[]
                };
            })
        }

        mounted() {

        }

        @Watch('date')
        onDateChange() {
            this.loadView();
        }

        @Watch('$route')
        onRouteChange() {
            this.loadView()
        }

        onAdvertDelete(id: any) {
            this.loadView();
        }
    }
</script>

<style scoped>

</style>